<template>
  <div class="home">
    <van-search
      shape="round"
      @focus="$router.push('/search')"
      placeholder="搜索商品"
    >
      <template #left>
        <img v-if="result" :src="result.logoUrl" />
      </template>
    </van-search>
    <van-swipe :autoplay="3000" @change="changeBannber">
      <van-swipe-item v-for="ba in banner" :key="ba.id">
        <router-link :to="ba.url" tag="div" class="item">
          <img :src="ba.pic" />
        </router-link>
      </van-swipe-item>
      <template #indicator>
        <ul class="indicator">
          <li
            v-for="i in banner.length"
            :key="i"
            :class="{ currentItem: i - 1 == index }"
          >
            {{ i }}
          </li>
        </ul>
      </template>
    </van-swipe>
    <van-grid v-if="result" :border="true">
      <van-grid-item
        v-for="item in result.menus"
        :key="item.id"
        :icon="item.pic"
        :text="item.name"
        :url="item.wap_url"
      />
    </van-grid>
    <van-notice-bar
      v-if="result"
      class="scroll-notice"
      :scrollable="false"
      background="#fff"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="2000"
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in result.roll" :key="item.id">
          <div class="scrollItem">
            <span> {{ item.info }}</span>
            <i class="fa fa-angle-right"></i>
          </div>
        </van-swipe-item>
      </van-swipe>
      <template #left-icon>
        <img
          src=""
        />
      </template>
    </van-notice-bar>
    <div class="wrapper">
      <div class="select">
        <span>快速选择</span>
        <b @click="guno">
          更多<i class="fa fa-angle-right" aria-hidden="true"></i>
        </b>
      </div>
      <div class="shoping">
        <van-grid v-if="result" :border="false" class="shopings">
          <van-grid-item
            v-for="select in result.info.fastList"
            :key="select.id"
            :text="select.cate_name"
          >
            <template #icon>
              <img :src="select.pic" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <van-divider :style="{ padding: '0 10px', borderColor: '#ccc' }" />
      <div class="fine">
        <span>精品推荐</span>
        <b @click="gunt">
          更多<i class="fa fa-angle-right" aria-hidden="true"></i>
        </b>
      </div>
    </div>
    <van-swipe indicator-color="white" class="my-swipe" :autoplay="3000">
      <!-- 跳转商品详情 -->
      <van-swipe-item v-for="item in bastBanner" :key="item.id">
        <div><img :src="item.img" /></div>
      </van-swipe-item>
      <!-- <template #indicator>
        <div class="custom-indicator">{{ index }}</div>
      </template> -->
    </van-swipe>
    <commoditys
      v-for="item in bastList"
      :key="item.id"
      :item="item"
    ></commoditys>
    <div class="hotList">
      <div class="hot">
        <div class="hot1">
          <div class="hot2">
            <span class="sadao">热门榜单</span>
            <span class="sada">根据销量、搜索、好评等综合得出 </span>
          </div>
          <div class="hot3">
            <span>更多<i class="fa fa-angle-right"></i></span>
          </div>
        </div>
      </div>
      <van-grid class="hotshopp" column-num="3" :border="false">
        <van-grid-item
          v-for="item in likeInfo"
          :key="item.id"
          :text="item.store_name"
        >
          <template #icon>
            <router-link :to="`ProductDetails/${item.id}`">
              <img :src="item.image" class="three" />
              <span id="price">{{ "￥" + item.price }}</span>
            </router-link>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="choosefast">
      <div class="fast fasttoo">首发新品</div>
      <i class="more">更多 <i class="fa fa-angle-right"></i></i>
    </div>
    <div class="choosediee">
      <!-- :text="va.store_name" -->
      <van-grid class="choosee" :border="false" :column-num="10" :gutter="5">
        <van-grid-item
          v-for="va in firstList"
          :key="va.id"
          :text="va.store_name"
        >
          <template #icon>
            <router-link :to="`ProductDetails/${va.id}`">
              <img :src="va.image" class="fastcommodityy" />
              <span id="pricees">{{ va.price }}</span>
            </router-link>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <hr class="hh" />
    <div class="choosefast">
      <div class="fast fasttoo">促销单品</div>
      <i class="more">更多 <i class="fa fa-angle-right"></i></i>
    </div>
    <promotional :benefit="benefit" />
  </div>
</template>

<script>
import Commoditys from "../components/Commoditys.vue";
import Promotional from "../components/Promotional.vue";
export default {
  name: "Home",
  data() {
    return {
      result: null,
      banner: [],
      index: 0,
      fastList: [],
      bastBanner: [],
      bastList: [],
      likeInfo: [],
      firstList: [],
      benefit: [],
    };
  },
  created() {
    this.axios.get("/index").then((re) => {
      console.log(re);
      this.result = re;
      this.banner = re.banner;
      this.fastList = re.info.fastList;
      this.bastBanner = re.info.bastBanner;
      this.bastList = re.info.bastList;
      this.likeInfo = re.likeInfo;
      this.firstList = re.info.firstList;
      this.benefit = re.benefit;
    });
  },
  methods: {
    changeBannber(index) {
      this.index = index;
    },
    guno() {
      this.$router.push({ name: "Category" });
    },
    gunt() {
      this.$router.push({ name: "Fine", params: { bastList: this.bastList } });
    },
  },
  components: { Commoditys, Promotional },
};
</script>
<style lang="less">
.van-search {
  img {
    width: 100px;
    padding-right: 20px;
  }
}
.item {
  img {
    width: 100%;
    height: 190px;
    display: block;
  }
}
.indicator {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  li {
    text-indent: -999px;
    margin-right: 5px;
    width: 10px;
    height: 2px;
    background: #fff;
    &.currentItem {
      background: rgba(255, 255, 255, 0.5);
    }
  }
}
.van-grid-item__icon {
  width: 40px;
  .van-icon__image {
    width: 100%;
    height: 100%;
  }
  .van-grid-item__text {
    color: #333;
  }
}
.notice-swipe {
  line-height: 40px;
  height: 40px;
}
.scroll-notice {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-shadow: 0px 0px 10px #eee;
  .van-notice-bar__content.van-ellipsis {
    width: 100%;
  }
  .scrollItem {
    padding-left: 20px;
    color: #666;
    display: flex;
    align-items: center;
    span {
      flex: 1;
    }
    i {
      width: 10px;
      font-size: 20px;
    }
  }
  img {
    width: 62px;
  }
}
.wrapper {
  .select,
  .fine {
    display: flex;
    padding: 15px;
    span {
      flex: 1;
      font-size: 15px;
      font-weight: bold;
      line-height: 20px;
    }
    b {
      font-size: 13px;
      display: block;
      line-height: 16px;
    }
    .fa-angle-right {
      display: inline-block;
      font-size: 18px;
      // padding:2px 0px 0px 5px;
      width: 10px;
      text-align: right;
      line-height: 16px;
    }
  }
  .van-grid {
    flex-wrap: nowrap;
    overflow: auto;
    width: 100vw;
    &::-webkit-scrollbar {
      display: none;
    }
    .van-grid-item {
      width: 200vw;
    }
  }
  .shoping {
    .shopings {
      // border-bottom: 1px solid #eee;
      img {
        width: 90px;
        height: 90px;
      }
      // .van-grid-item__content{
      //   border-bottom: 1px solid red;
      // }
    }
    .van-grid-item__text {
      padding: 10px 0px;
      width: 90px;
      text-align: center;
      border-bottom: 2px solid red;
      box-shadow: 0px 4px 10px #eee;
    }
  }
  .van-divider {
    margin: 0px;
  }
}
.choosefast {
  margin: 0px 15px;
  height: 40px;
  display: flex;
  align-items: center;
  .fast {
    flex: 1;
    color: #282828;
    font-weight: bold;
    font-size: 15px;
  }
  .more {
    // width: 40px;
    // height: 10px;
    font-size: 13px;
    color: #333;
    .fa {
      font-size: 18px;
    }
  }
}
.choosedie {
  overflow: auto;
  width: 97vw;
  .choose {
    width: 270vw;
    .van-grid-item__icon {
      display: block;
      width: 90px;
      height: 90px;
    }
    .van-grid-item__text {
      display: block;
      width: 90px;
      height: 30px;
      text-align: center;
      // border-bottom: 2px solid #f07a0c;
    }
  }
}
.fastcommodity {
  width: 100%;
}
.my-swipe {
  background-color: #ffffff;
  div {
    width: 345px;
    height: 130px;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  // .custom-indicator {
  //   position: absolute;
  //   right: 5px;
  //   bottom: 5px;
  //   padding: 2px 5px;
  //   font-size: 12px;
  //   background: rgba(0, 0, 0, 0.1);
  // }
}
.hotList {
  position: relative;
  width: 98vw;
  height: 208.5px;
  .hot {
    width: 98vw;
    height: 107.5px;
    background: url(http://47.115.51.185/h5/img/index-bg.7128c2eb.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .hot1 {
      margin: 0 auto;
      width: 345px;
      height: 43.5px;
      display: flex;
      align-items: center;
      color: #ffffff;
      .hot2 {
        flex: 1;
        width: 287.5px;
        .sadao {
          font-size: 15px;
          margin-right: 10px;
          font-weight: bold;
        }
        .sada {
          font-size: 12px;
        }
      }
      .hot3 {
        width: 45.3px;
        font-size: 13px;
        .fa {
          margin-left: 5px;
          font-size: 17px;
        }
      }
    }
  }
  .hotshopp {
    border-radius: 20px;
    box-shadow: 3px 4px 7px 3px #ccc;
    .van-grid-item__text {
      text-align: center;
    }
    background-color: #ffffff;
    width: 345px;
    height: 165px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    .van-grid-item__icon-wrapper {
      .three {
        width: 100%;
      }
    }
    .van-grid-item {
      white-space: nowrap;
      overflow: hidden;
      .van-grid-item__text {
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .van-grid-item__content {
      width: 100% !important;
      border-radius: 15px;
      height: 165px;
    }
  }
  #price {
    position: absolute;
    bottom: -35px;
    left: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #fc4141 !important;
  }
}
.fasttoo {
  font-size: 15px;
}

.choosediee {
  overflow: auto;
  width: 97vw;
  height: 174.5px;
  .choosee {
    align-content: flex-start;
    width: 375vw;
    height: 100%;
    .van-grid-item__content {
      padding: 0px;
      width: 100%;
      height: 100%;
      .van-grid-item__icon-wrapper {
        width: 120px;
        height: 120px;
      }
      .van-grid-item__text {
        white-space: nowrap;
        width: 120px;
        padding: 7.5px 5px 0px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.fastcommodityy {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
#pricees {
  position: absolute;
  bottom: -40px;
  left: 40px;
  font-size: 13px;
  color: #fc4141 !important;
  font-weight: 700;
}
.hh {
  border: none;
  border-bottom: 1px solid rgb(228, 228, 228);
  margin: 10px 0px 0px 0px;
  margin-right: 5px;
}
</style>
